<template>
    <div class="main">
        <div class="download" @click="genDatabaseDoc()">
            <svg-icon icon-class="download" style="font-size: 17px;"/>&nbsp;
            <span>生成并下载数据库文档</span>
        </div>
        <hu-dialog title="配置" top="20%" ref="databaseDocOpen" width="600px" submit="生成并下载" @hu-dialog="databaseDocDialog">
            <hu-input v-model="info.fileName" title="文档名称"/>
            <hu-input v-model="info.description" title="文档描述"/>
            <hu-input v-model="info.version" title="文档版本"/>
            <hu-select-dict v-model="info.fileType" :selectDic="fileTypeList" title="文档类型" search />
            <hu-select-dict v-model="info.datasourceId" :selectDic="datasorceList" title="数据库名" search />
        </hu-dialog>
    </div>
</template>
<script>
import "@/assets/styles/base.scss"
import { genWord, genHtml, genDM } from '@/api/extend/doc'
import { selectDataSourceList } from '@/api/datasource'
import { isEmpty, isEmptyOfForm } from '@/utils/validate'
export default {
    name: '数据库文档',
    components: {

    },
    mixins: [],
    props: [

    ],
    data() {
        return {
            fileTypeList: [
                {
                    value: '.doc',
                    label: 'Word',
                },
                {
                    value: '.html',
                    label: 'Html',
                },
                {
                    value: '.md',
                    label: 'MarkDown',
                },
            ],
            info: {
                datasourceId: null,
                fileName: null,
                description: null,
                version: null,
                fileType: null,
            },
            datasorceList: [],
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {
        
    },
    methods: {
        selectDataSourceList() {
            selectDataSourceList().then((res) => {
                let list = res.data.data
                let arr = []
                for(let item of list) {
                    let obj = {
                        value: item.id,
                        label: item.name
                    }
                    arr.push(obj)
                }
                this.datasorceList = arr
            }).catch((error) => {
                this.$huTip({ type: "error", value: error })
            })
        },
        genDatabaseDoc() {
            this.selectDataSourceList()
            this.$refs.databaseDocOpen.openDialog()
        },
        databaseDocDialog(val) {
            if(!val) {
                return;
            } else {
                if(isEmptyOfForm(this.info)) {
                    this.$huTip({ type: 'warning', value: '抱歉，配置表单有未填项' })
                } else {
                    this.$refs.databaseDocOpen.closeDialog()
                    this.$huTip({ type: 'info', value: '文件生成中...' })
                    if(this.info.fileType === '.doc') {
                        genWord(this.info).then((res) => {
                            this.downDoc(res.data, this.info)
                        }).catch((error) => {
                            this.$huTip({ type: 'error', value: error })
                        })
                    } else if(this.info.fileType === '.html') {
                        genHtml(this.info).then((res) => {
                            this.downDoc(res.data, this.info)
                        }).catch((error) => {
                            this.$huTip({ type: 'error', value: error })
                        })
                    } else if(this.info.fileType === '.md') {
                        genDM(this.info).then((res) => {
                            this.downDoc(res.data, this.info)
                        }).catch((error) => {
                            this.$huTip({ type: 'error', value: error })
                        })
                    }
                }
            }
        },
        downDoc(data, info) {
            const blob = new Blob([data])
            let fileName
            if(info.fileName === null || info.fileName === '') {
                fileName = `数据库开发文档.sql`
            } else {
                fileName = `${(info.fileName).split('.')[0]}${info.fileType}`
            }
            if ('download' in document.createElement('a')) {
                //支持a标签download的浏览器
                const link = document.createElement('a');//创建a标签
                link.download = fileName;//a标签添加属性
                link.style.display = 'none';
                link.href = URL.createObjectURL(blob);
                document.body.appendChild(link);
                link.click();//执行下载
                URL.revokeObjectURL(link.href); //释放内存
                document.body.removeChild(link);//释放标签
            } else {
                navigator.msSaveBlob(blob, fileName);
            }
        },
    },
}
</script>
<style lang="scss" scoped>
.main{
    position: relative;
}
.download{
    cursor: pointer;
    user-select: none;
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #8f9297;
    border: 1px solid #2a2f39;
    border-radius: 3px;
    transition: 0.3s;
    background-color: #1e2430;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.download:hover{
    background-color: rgba(45, 148, 35, 0.5);
    background-color: #171d27;
}
</style>